<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="UTF-8">
        <title>在线用户管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
        <link rel="stylesheet" th:href="@{/css/font.css}">
        <link rel="stylesheet" th:href="@{/css/xadmin.css}">
        <script type="text/javascript" th:src="@{/lib/jquery/jquery.min.js}"></script>
        <script charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
        <script type="text/javascript"  th:src="@{/js/xadmin.js}"></script>
        <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    </head>

    <body class="animated fadeIn">
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="#">首页</a>
                <a href="#">系统管理</a>
                <a>
                  <cite>在线用户</cite>
                </a>
            </span>
            <a class="layui-icon layui-icon-refresh"
               style="float:right"
               href="javascript:location.replace(location.href);" title="刷新"></a>
        </div>

        <div class="x-body">
            <table class="layui-hide" id="user-table"></table>
        </div>

        <script type="text/html" id="column-toolbar">
            <shiro:hasPermission name="online:kickout">
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="kickout">下线</a>
            </shiro:hasPermission>
        </script>

        <script>
            layui.use(['table', 'element', 'laydate'], function () {
                var table = layui.table;
                var $ = layui.$;

                table.render({
                    elem: '#user-table'
                    , url: '/online/list'
                    , page: true
                    , cols: [
                        [
                            {type: 'numbers', title: '序号', width: "5%"}
                            , {field: 'username', title: '用户名', width: "13%", templet: function (d) {
                                    var username = d.username;
                                    if (d.id === '[[${#session.id}]]') {
                                        username += "<span class=\"layui-badge-rim layui-bg-blue\">当前登录</span>";
                                    }
                                    return username;
                                }
                            }
                            , {field: 'id', title: 'SESSION_ID', width: "25%"}
                            , {field: 'startTimestamp', title: '登录时间', width: "15%"}
                            , {field: 'lastAccessTime', title: '最后访问时间', width: "15%"}
                            , {field: 'ip', title: 'IP', width: "12%"}
                            , {field: 'status', title: '状态', width: "5%"}
                            , {title: '操作', align: 'center', toolbar: '#column-toolbar'}
                        ]
                    ]
                });

                // 行点击事件
                table.on('tool', function (obj) {
                    var data = obj.data;
                    var event = obj.event;
                    if (event === 'kickout') {
                        $.post('/online/kickout', {"sessionId": data.id}, function (data) {
                            handlerResult(data, kickoutDone);
                        });
                    }
                });

                function kickoutDone(data) {
                    parent.layer.msg("该用户已被强制下线!", {icon: 6});
                    table.reload('user-table');
                }
            });
        </script>
    </body>

</html>